<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="/static/layui/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

<body>
<!--表格 -->
<table class="layui-hide" id="ID-treeTable-demo" lay-filter="TD-manage" ></table>

<!--表格列“操作”里的按钮 -->
<script type="text/html" id="barManage">
  <div class="layui-clear-space">
    <a class="layui-btn layui-btn-danger" lay-event="del" id="del">删除</a>
    <a class="layui-btn layui-btn-warm" lay-event="change-password" id="change-password">修改密码</a>
    <a class="layui-btn layui-btn-warm" lay-event="modify-ou" id="modify-ou">修改部门</a>
  </div>
</script>

<div id="delUser" style="display: none"></div>

<div id="changePassword" class="changePassword" style="display: none">
    <div class="layui-inline">
        <label class="layui-form-label">登录密码</label>
        <div class="layui-input-inline">
          <input type="password" id="password" name="password"  lay-verify="required" class="layui-input">
        </div>
    </div>

    <div class="layui-inline">
        <label class="layui-form-label">确认密码</label>
        <div class="layui-input-inline">
          <input type="password" id="password1" lay-verify="required|confirmPass" class="layui-input">
        </div>
    </div>
</div>

<div id="modifyOu" class="modifyOu" style="display: none">
    <table class="layui-hide" id="ID-treeTable-demo1" lay-filter="TD-manage" ></table>
</div>

</body>
<script>
    // 初始化执行函数
    $(function (){initTable();});
    // 初始化表格
    function initTable(){
        layui.use(function () {
            let table = layui.table;
            // 执行生成
            var inst = table.render({
                elem: '#ID-treeTable-demo',     // 引用名称 table标签里引用
                id: 'tableId',  // 表格id索引
                url: '/data_users', // 此处为静态模拟数据，实际使用时需换成真实接口
                method: 'post',     // 访问方法
                {#toolbar: '#TPL-treeTable-demo',  // 上方工具栏的引用名称，暂未使用，先注释掉#}
                cols: [[    // 定义表格的列
                    {type: 'numbers', title: '序号', fixed: 'left'},   // 自带的序号
                    {field: 'username', title: '用户名', width: 180},     // 使用field的值从data里取值，tittle是表格的表头名
                    {field: 'dn', title: 'DN', width: 380},
                    {title: '操作', width: 300, toolbar: '#barManage'} // toolbar在id="barManage"的script标签里引用
                ]],
                page: true, // 是否分页
                parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                    var result;
                    if (this.page.curr) {
                        result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                    } else {
                        result = res.data.slice(0, this.limit);
                    }
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": result //解析数据列表
                    }
                },
                done: function (res, current, count) {
                    $('thead tr').css({'background-color': '#8E236B', 'color': 'white'})
                }
            });
            table.on('tool(TD-manage)', function (obj) {
                    var oneLineData = obj.data;
                    var tree = layui.tree;
                    var layer = layui.layer;
                    var util = layui.util;
                    if (obj.event === 'del') {
                        // 删除用户的功能函数
                        layui.use('layer', function () {
                            //实例化一个弹出层对象
                            let layer = layui.layer;
                            //展示弹出层
                            layer.open({
                                type: 1,    // 弹出层类型
                                title: '警告：删除后无法恢复！请点击“确认”删除',
                                {#area: ['500px', '400px'],#}
                                btn: ['确定', '取消'],
                                shade: [0.5, '#00000'],
                                shadeClose: true,
                                content: $('#delUser'),
                                btn1: function (layero, index) {
                                    $.ajax({
                                        url: '/delete_user',
                                        type: 'post',
                                        data: {dn: oneLineData.dn},
                                        success: function (res) {
                                            if (res.code === 1) {
                                                alert(res.msg);
                                                layer.closeAll();
                                                table.reloadData('tableId') // 重载表格数据
                                            } else if (res.code === 2) {
                                                alert(res.msg);
                                                layer.closeAll();
                                                table.reloadData('tableId') // 重载表格数据
                                            }
                                        },
                                    })
                                },
                            })
                        })
                    } else if (obj.event === 'change-password') {
                        // 添加子部门的方法函数
                        layui.use(['tree', 'util', 'layer'], function () {
                            //实例化一个弹出层对象
                            let layer = layui.layer;
                            //展示弹出层
                            layer.open({
                                type: 1,    // 弹出层类型
                                title: '修改密码',
                                area: ['400px', '253px'],
                                btn: ['确定', '取消'],
                                shade: [0.5, '#00000'],
                                shadeClose: true,
                                content: $('#changePassword'),
                                btn1: function (layero, index) {
                                    if ($('#password').val() === $('#password1').val()) {
                                        $.ajax({
                                            url: '/change_password',
                                            type: 'post',
                                            data: {
                                                password: $('#password').val(),
                                                dn: oneLineData.dn
                                            },
                                            success: function (res) {
                                                if (res.code === 1) {
                                                    alert(res.msg);
                                                    layer.closeAll();
                                                    table.reloadData('tableId') // 重载表格数据
                                                } else if (res.code === 2) {
                                                    alert(res.msg)
                                                }
                                            }
                                        })
                                    } else if ($('#password').val() != $('#password1').val()) {
                                        alert('密码不一致')
                                    }
                                },
                                end: function (layero, index) {
                                    document.getElementById("changePassword").setAttribute('style', 'display: none');
                                },
                            })
                        })
                    } else if (obj.event === 'modify-ou') {
                        layui.use(['tree', 'util', 'layer'], function () {
                            var old_ou = obj.data.dn;
                            var username = obj.data.username;
                            var dn_data;
                            let layer = layui.layer;
                            $.ajax({
                                // 获取部门架构
                                type: "post",
                                url: "/data_ou",
                                dataType: "json",
                                success: function (result) {
                                    if (result.code == 0) {
                                        tree.render({
                                            elem: '#modifyOu',
                                            data: result.data,
                                            showLine: false, // 是否开启连接线
                                            showCheckbox: true,  // 是否显示复选框
                                            oncheck: function (obj) {
                                                var b = obj.checked
                                                dn_data = obj.data.name_dn
                                            },
                                        });
                                    } else {
                                        alert("请重试。");
                                    }
                                }
                            })
                            // 更换部门的方法函数
                            layer.open({
                                type: 1,    // 弹出层类型
                                title: '更换部门：' + old_ou,
                                area: ['400px', '253px'],
                                btn: ['确定', '取消'],
                                shade: [0.5, '#00000'],
                                shadeClose: true,
                                content: $('#modifyOu'),
                                btn1: function (layero, index) {
                                    $.ajax({
                                        type: "post",
                                        url: "/modify_ou",
                                        {#dataType: "json",#}
                                        data: {old_ou: old_ou, new_ou: dn_data},
                                        success: function (res) {
                                            console.log(res);
                                            if (res.code === 1) {
                                                alert(res.msg);
                                                layer.closeAll();
                                                table.reloadData('tableId') // 重载表格数据
                                            } else if (res.code === 2) {
                                                alert(res.msg)
                                            }
                                        }
                                    })
                                },
                                end: function (layero, index) {
                                    document.getElementById("modifyOu").setAttribute('style', 'display: none');
                                },
                            })
                        })
                    }
            })
        })
    }
</script>
</html>